<template>
  <van-nav-bar title="分类" />
  <van-search v-model="value" placeholder="请输入搜索关键词" shape="round" />

  <div class="wrap">
    <van-sidebar v-model="active" @change="handleChange">
      <van-sidebar-item title="推荐" />
      <van-sidebar-item title="全球奶粉" />
      <van-sidebar-item title="尿不湿" />
    </van-sidebar>

    <div class="right">
      <div v-for="item in classifyList" :key="item.productId">
        {{ item.title }}
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref, onMounted, computed } from "vue";
import { useStore } from "vuex";

export default defineComponent({
  setup() {
    const store = useStore();
    const value = ref<string>("");
    const active = ref<number>(0);

    const classifyList = computed(() => {
      return store.state.index.classifyList;
    });

    onMounted(() => {
      store.dispatch("index/getClassifyAsync", "1");
    });

    const handleChange = (i: number) => {
      store.dispatch("index/getClassifyAsync", i + 1 + "");
    };

    return { value, active, classifyList, handleChange };
  },
});
</script>

<style lang="less" scoped>
.wrap {
  display: flex;

  .right {
    flex: 1;
  }
}
</style>
